<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改配件店自有配件管理')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-storePartsSelf-edit" th:object="${zsyhStorePartsself}">
            <h4 class="form-header h4">配件店自有配件管理信息</h4>
            <input name="id" th:field="*{id}" type="hidden">

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">配件店铺名称：</label>
                        <div class="col-sm-8">
                            <p name="storeName" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{storeName}]]</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">配件名称：</label>
                        <div class="col-sm-8">
                            <p name="partsName" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{partsName}]]</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">配件分类：</label>
                        <div class="col-sm-8">
                            <p name="partsTypeName" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{partsTypeName}]]</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">配件描述：</label>
                        <div class="col-sm-8">
                            <p name="partsDetails" style="border-width: 0px;padding:6px 4px;" class="form-control">[[*{partsDetails}]]</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">配件主图：</label>
                        <div class="col-sm-8">
                            <p class="user-info-head" onclick="avatar()"><img id="partsImagesShow" class="img-thumbnail img-lg" th:src="*{partsImages}"></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">配件的单位：</label>
                        <div class="col-sm-8">
                            <p name="partsUnit" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{partsUnit}]]</p>
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">自有配件规格信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table" data-page-size="10"
                               data-show-custom-view="true" data-custom-view="customViewFormatter"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <template id="profileTemplate">
        <div class="col-sm-6">
            <div class="contact-box">
                <a href="viewStoreAttribute?id=%attributeId%">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" style="width: 100px;height: 100px" class="img-rounded m-t-xs img-rounded" src="%IMAGE%">
                            <!--<div class="m-t-xs font-bold">%attributeRemarks%</div>-->
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <h3><strong>%attributeName%</strong></h3>
                        <p><i class="fa fa-jpy"></i> %attributeSalePrice% </p>
                        <div class="m-t-xs font-bold">%REMARKS%</div>
                    </div>
                    <div class="clearfix"></div>
                </a>
            </div>
        </div>
    </template>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <th:block th:include="include :: bootstrap-table-custom-view-js" />
    <script th:inline="javascript">
        var prefix = ctx + "zsyh/storePartsSelf";
        var isShowDatas = [[${@dict.getType('zsyh_yesno')}]];
        $("#form-storePartsSelf-edit").validate({
            focusCleanup: true
        });

        $(function() {
            var options = {
                data: [[${zsyhStorePartsself.zsyhStorePartsattributeList}]],
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                showExport: true,
                sidePagination: "client",
                columns: [
                    {
                        field: 'index',
                        align: 'center',
                        title: "序号",
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            return columnIndex + $.table.serialNumber(index);
                        }
                    },
                    {
                        field: 'id',
                        title: '规格id',
                        visible: false
                    },
                    {
                        field: 'attributeName',
                        align: 'center',
                        title: '规格名称',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeName' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'createTime',
                        align: 'center',
                        title: '创建时间',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].createTime' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'attributeSort',
                        align: 'center',
                        title: '排序',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeSort' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'attributeSalePrice',
                        align: 'center',
                        title: '销售价',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeSalePrice' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'attributeRemarks',
                        align: 'center',
                        title: '备注',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeRemarks' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'attributeLogo',
                        align: 'center',
                        title: '规格图',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeLogo' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'isShow',
                        align: 'center',
                        title: '是否上架',
                        formatter: function(value, row, index) {
                            var name = $.common.sprintf("zsyhAgentPartsattributeList[%s].isShow", index);
                            return $.common.dictToSelect(isShowDatas, value, name);
                        }
                    },
                    {
                        field: 'attributeRetailPrice',
                        align: 'center',
                        title: '建议零售价',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeRetailPrice' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'attributeAdvantage',
                        align: 'center',
                        title: '产品优势描述',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeAdvantage' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'attributeInstructions',
                        align: 'center',
                        title: '产品使用说明书',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='zsyhAgentPartsattributeList[%s].attributeInstructions' value='%s'>", index, value);
                            return html;
                        }

                    }]
            };
            $.table.init(options);
        });


        function customViewFormatter (data) {
            var template = $('#profileTemplate').html()
            var view = ''
            $.each(data, function (i, row) {
                view += template.replace('%IMAGE%', row.attributeLogo)
                    .replace('%attributeName%', row.attributeName)
                    .replace('%attributeRemarks%', row.attributeRemarks)
                    .replace('%REMARKS%', row.attributeRemarks)
                    .replace('%attributeId%', row.id)
                    /* .replace('%isShow%', row.isShow)*/
                    /* .replace('%userEmail%', row.userEmail)
                     .replace('%userPhone%', row.userPhone)*/
                    .replace('%attributeSalePrice%', row.attributeSalePrice);
            })
            return `<div class="row mx-0">${view}</div>`
        }


    </script>
</body>
</html>